<template>
    <div class="goodsshow">
        <div class="mui-card">
            <div class="mui-card-header">
                <mt-navbar v-model="selected">
                    <mt-tab-item id="1">商品详情</mt-tab-item>
                    <mt-tab-item id="2">商品参数</mt-tab-item>
                    <mt-tab-item id="3">商品评价</mt-tab-item>
                </mt-navbar>
            </div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <mt-tab-container v-model="selected">
                        <mt-tab-container-item id="1">
                            <h4>{{ goodsdesc.title}}</h4>
                            <p class="content" v-html="goodsdesc.content"></p>
                        </mt-tab-container-item>
                        <mt-tab-container-item id="2">
                            <mt-cell title="商品货号 : ">&nbsp; {{goodsinfo.goods_no}}</mt-cell>
                            <mt-cell title="剩余数量 : ">&nbsp; {{goodsinfo.stock_quantity}}</mt-cell>
                            <mt-cell title="发布时间 : ">&nbsp; {{goodsinfo.add_time | dateFormat}}</mt-cell>
                        </mt-tab-container-item>
                        <mt-tab-container-item id="3">
                            <comment :id="id"></comment>
                        </mt-tab-container-item>
                    </mt-tab-container>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
    import comment from '../../components/comment'
    export default {
        name: "goodsShow",
        data(){
            return {
                selected:"1"  //注意: 初始值要设成字符串,数字格式,加载页面不会自动显示出来
            }
        },
        components:{
            comment
        },
        props:['id','goodsinfo','goodsdesc']
    }
</script>

<style scoped >
    h4{
        text-align: center;
        color: #007aff;
        font-size: 14px;
        line-height: 32px;
    }
    >>>.content p>img{
        width: 100%;
        height: 100%;
        vertical-align: middle;
    }
    >>> p{
        margin-bottom: 0
    }
    >>>.content td>img{
        height: 100%;
        vertical-align: middle;
    }
    .mint-navbar {
        justify-content: space-between;
        width: 100%;}
    .mui-card-content-inner{
        padding: 0;
    }
    >>>.mint-cell-wrapper{
        padding: 0 20px;
    }
    >>>.mint-cell-title{
        flex: none;
    }
    >>>.mint-cell-value{
        color: #333333;
    }
</style>
